<template>
  <div class="wrap">
    <div class="col-title">
      最近七天业务情况总览
    </div>

    <div class="task-box">
      <div class="container">
        <img src="@assets/dispatch.svg" />
        <div>
          <p>调度队列</p>
          <span style="color: #95DFDE">{{ total }}</span><span>项</span>
        </div>
      </div>

      <div class="container">
        <img
          src="@assets/pending.svg"
          style="width: 74px;height: 74px"
        />
        <div>
          <p>进行中</p>
          <span style="color: #F7B824">{{ working }}</span><span>项</span>
        </div>
      </div>

      <div class="container">
        <img src="@assets/finish.svg" />
        <div>
          <p>已完成</p>
          <span style="color: #7FD4F0">{{ finished }}</span><span>项</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { gPostAction } from "@/api/manage";
  export default {
    name: 'Business',
    components: {},
    data() {
      return {
        total: 0,
        working: 0,
        finished: 0,
      }
    },
    mounted() {
      this.loadData();
    },
    methods: {
      loadData() {
        gPostAction("/scheduler/overview").then((res) => {
          if (res.success && res.data) {
            this.total = res.data.total || 0;
            this.working = res.data.working || 0;
            this.finished = res.data.finished || 0;
          }
        });
      },
    },
  }
</script>

<style
  lang="less"
  scoped
>
  .wrap {
    padding: 25px 40px 0 25px;

    .col-title {
      display: flex;
      align-items: center;
      font-size: 16px;
      color: #017972;
      padding-left: 10px;
      margin-bottom: 20px;

      &::before {
        content: '';
        height: 16px;
        display: inline-block;
        border-left: 2px solid #017972;
        padding-right: 10px;
      }
    }

    .task-box {
      display: flex;
      align-items: stretch;
      border: 1px solid #dddddd;
      height: 100%;

      .container {
        display: flex;
        justify-content: center;
        padding: 25px 6px 25px 6px;
        align-items: center;
        flex: 1;
        width: 33%;
        height: auto;

        &:not(:last-child) {
          border-right: 1px solid #dddddd;
        }

        img {
          margin-right: 28px;
          width: 68px;
          height: 68px;
        }

        div {
          &>p {
            margin-bottom: 0px;
            font-size: 16px;
            color: #6B6B6B;
          }

          &>span:first-of-type {
            margin-right: 8px;
            font-size: 22px;
          }
        }
      }
    }
  }
</style>